//核心组件预定样式，vi-style-controller总控

//颜色控制
$dicColorList:(
	default: (bg:$vi-color-default, bor:$vi-color-default, txt:$vi-txtColor-default, plainTxt:$vi-txtColor-default),
	primary: (bg:$vi-color-primary, bor:$vi-color-primary, txt:$vi-txtColor-inverse, plainTxt:$vi-color-primary),
	second: (bg:$vi-color-second, bor:$vi-color-second, txt:$vi-txtColor-inverse, plainTxt:$vi-color-second),
	third: (bg:$vi-color-third, bor:$vi-color-third, txt:$vi-txtColor-inverse, plainTxt:$vi-color-third),
	fourth: (bg:$vi-color-fourth, bor:$vi-color-fourth, txt:$vi-txtColor-inverse, plainTxt:$vi-color-fourth),
	fifth: (bg:$vi-color-fifth, bor:$vi-color-fifth, txt:$vi-txtColor-inverse, plainTxt:$vi-color-fifth),
	success: (bg:$vi-color-success, bor:$vi-color-success, txt:$vi-txtColor-inverse, plainTxt:$vi-color-success),
	warning: (bg:$vi-color-warning, bor:$vi-color-warning, txt:$vi-txtColor-inverse, plainTxt:$vi-color-warning),
	error: (bg:$vi-color-error, bor:$vi-color-error, txt:$vi-txtColor-inverse, plainTxt:$vi-color-error),
	grey: (bg:$vi-color-grey, bor:$vi-color-grey, txt:$vi-txtColor-inverse, plainTxt:$vi-txtColor-default),
	bgDefault: (bg:$vi-bgColor-default, bor:$vi-bgColor-default, txt:$vi-txtColor-default, plainTxt:$vi-txtColor-default),
	bgPrimary: (bg:$vi-bgColor-primary, bor:$vi-color-primary, txt:$vi-color-primary, plainTxt:$vi-color-primary),
	bgSuccess: (bg:$vi-bgColor-success, bor:$vi-color-success, txt:$vi-color-success, plainTxt:$vi-color-success),
	bgInfo: (bg:$vi-bgColor-info, bor:$vi-color-primary, txt:$vi-color-info, plainTxt:$vi-color-info), 
	bgWarning: (bg:$vi-bgColor-warning, bor:$vi-color-warning, txt:$vi-color-warning, plainTxt:$vi-color-warning),
	bgError: (bg:$vi-bgColor-error, bor:$vi-color-error, txt:$vi-color-error, plainTxt:$vi-color-error),
);
@each $type, $colorArr in $dicColorList{
	$bor: map-get($colorArr, "bor");
	$bg: map-get($colorArr, "bg");
	$txt: map-get($colorArr, "txt");
	$plainTxt: map-get($colorArr, "plainTxt");
	.vi_styleController.vi_#{$type}.vi_themeBg{ background-color:#{$bg};}
	.vi_styleController.vi_#{$type}.vi_themeBor{ border-color:#{$bor};}
	.vi_styleController.vi_#{$type}.vi_themeTxt{ color:#{$txt};}
	.vi_styleController.vi_#{$type}.vi_themeTxt.vi_plain{ color:#{$plainTxt};}
	//自定义图标
	.vi_styleController.vi_#{$type}.vi_plain /deep/ .vi_dot,
	.vi_styleController.vi_#{$type}.vi_plain /deep/ .vi_dot::before,
	.vi_styleController.vi_#{$type}.vi_plain /deep/ .vi_dot::after{ background-color:#{$plainTxt}}
}

//尺寸控制，带圆角处理，按组件分
$squareRate:0.2;//方形圆角率，data变量还有一个，须一致
$dicSize:(
	//按钮
	button:(
		lg: (w:100%, h:if($useResponse, 3em, 85rpx), r:if($useResponse, 3em, 85rpx)),
		md: (w:50%, h:if($useResponse, 2.5em, 70rpx), r:if($useResponse, 2.5em, 70rpx)),
		sm: (w:25%, h:if($useResponse, 2em, 55rpx), r:if($useResponse, 2em, 55rpx)),
	),
	//复选框
	checkbox:(
		lg: (w:if($useResponse, 1.2em, 38rpx), h:if($useResponse, 1.2em, 38rpx), r:if($useResponse, 1.2em, 38rpx)),
		md: (w:if($useResponse, 1.2em, 34rpx), h:if($useResponse, 1.2em, 34rpx), r:if($useResponse, 1.2em, 34rpx)),
		sm: (w:if($useResponse, 1.2em, 30rpx), h:if($useResponse, 1.2em, 30rpx), r:if($useResponse, 1.2em, 30rpx))
	),
	//复选框按钮模式
	checkboxButton:(
		lg: (w:initial, h:if($useResponse, 2.5em, 70rpx), r:if($useResponse, 2.5em, 70rpx)),
		md: (w:initial, h:if($useResponse, 2em, 56rpx), r:if($useResponse, 2em, 56rpx)),
		sm: (w:initial, h:if($useResponse, 1.75em, 49rpx), r:if($useResponse, 1.75em, 49rpx)),
	),
	//步进器
	stepper:(
		lg: (w:if($useResponse, 1.4em, 42rpx), h:if($useResponse, 1.4em, 42rpx), r:if($useResponse, 1.4em, 42rpx)),
		md: (w:if($useResponse, 1.4em, 38rpx), h:if($useResponse, 1.4em, 38rpx), r:if($useResponse, 1.4em, 38rpx)),
		sm: (w:if($useResponse, 1.4em, 34rpx), h:if($useResponse, 1.4em, 34rpx), r:if($useResponse, 1.4em, 34rpx))
	),
	//滑动条-按钮
	slide:(
		lg: (w:if($useResponse, 1.8em, 54rpx), h:if($useResponse, 1.8em, 54rpx), r:if($useResponse, 1.8em, 54rpx)),
		md: (w:if($useResponse, 1.8em, 44rpx), h:if($useResponse, 1.8em, 44rpx), r:if($useResponse, 1.8em, 44rpx)),
		sm: (w:if($useResponse, 1.8em, 34rpx), h:if($useResponse, 1.8em, 34rpx), r:if($useResponse, 1.8em, 34rpx))
	),
	//滑动条-进度条
	slideBar:(
		lg: (w:100%, h:if($useResponse, .45em, 13.5rpx), r:if($useResponse, .45em, 13.5rpx)),
		md: (w:100%, h:if($useResponse, .45em, 11rpx), r:if($useResponse, .45em, 11rpx)),
		sm: (w:100%, h:if($useResponse, .45em, 8.5rpx), r:if($useResponse, .45em, 8.5rpx))
	),
	//开关-外按钮
	switch:(
		lg: (w:if($useResponse, 2.2em, 60rpx) *5/3, h:if($useResponse, 2.2em, 60rpx), r:if($useResponse, 2.2em, 60rpx)),
		md: (w:if($useResponse, 2.2em, 50rpx) *5/3, h:if($useResponse, 2.2em, 50rpx), r:if($useResponse, 2.2em, 50rpx)),
		sm: (w:if($useResponse, 2.2em, 40rpx) *5/3, h:if($useResponse, 2.2em, 40rpx), r:if($useResponse, 2.2em, 40rpx))
	),
	//开关-内按钮
	switchBlock:(
		lg: (w:if($useResponse, 2.2em, 60rpx), h:if($useResponse, 2.2em, 60rpx), r:if($useResponse, 2.2em, 60rpx)),
		md: (w:if($useResponse, 2.2em, 50rpx), h:if($useResponse, 2.2em, 50rpx), r:if($useResponse, 2.2em, 50rpx)),
		sm: (w:if($useResponse, 2.2em, 40rpx), h:if($useResponse, 2.2em, 40rpx), r:if($useResponse, 2.2em, 40rpx))
	),
	//对话框按钮
	dialog:(
		lg: (w:initial, h:3em, r:0),
		md: (w:initial, h:2.5em, r:0),
		sm: (w:initial, h:2em, r:0),
	),
	//日历星期栏
	calendarWeek:(
		lg: (w:initial, h:3em, r:0),
		md: (w:initial, h:2.5em, r:0),
		sm: (w:initial, h:2em, r:0),
	),
	//日历日期栏
	calendarDate:(
		lg: (w:initial, h:3em, r:0),
		md: (w:initial, h:2.5em, r:0),
		sm: (w:initial, h:2em, r:0),
	),
	//日历日期栏-开启标签
	calendarDateTag:(
		lg: (w:initial, h:4.5em, r:0),
		md: (w:initial, h:4em, r:0),
		sm: (w:initial, h:3.5em, r:0),
	),
	//标签
	tag:(
		lg: (w:initial, h:1.75em, r:1.75em, px:0.75em),
		md: (w:initial, h:1.5em, r:1.5em, px:0.5em),
		sm: (w:initial, h:1.25em, r:1.25em, px:0.25em),
	),
	//搜索条
	searchbar:(
		lg: (w:initial, h:2.5em, r:2.5em),
		md: (w:initial, h:2em, r:2em),
		sm: (w:initial, h:1.75em, r:1.75em),
	),
	//进度条-正常
	progress:(
		lg: (w:100%, h:if($useResponse, .45em, 13.5rpx), r:if($useResponse, .45em, 13.5rpx)),
		md: (w:100%, h:if($useResponse, .45em, 11rpx), r:if($useResponse, .45em, 11rpx)),
		sm: (w:100%, h:if($useResponse, .45em, 8.5rpx), r:if($useResponse, .45em, 8.5rpx))
	),
	//进度条-内部标签加大
	progressInside:(
		lg: (w:100%, h:if($useResponse, .45em, 48rpx), r:if($useResponse, .45em, 48rpx)),
		md: (w:100%, h:if($useResponse, .45em, 38rpx), r:if($useResponse, .45em, 38rpx)),
		sm: (w:100%, h:if($useResponse, .45em, 28rpx), r:if($useResponse, .45em, 28rpx))
	),
	//分页器
	pagination:(
		lg: (w:initial, h:if($useResponse, 2.5em, 70rpx), r:if($useResponse, 2.5em, 70rpx), px:if($useResponse, 0.75em, 21rpx)),
		md: (w:initial, h:if($useResponse, 2em, 56rpx), r:if($useResponse, 2em, 56rpx), px:if($useResponse, 0.5em, 14rpx)),
		sm: (w:initial, h:if($useResponse, 1.5em, 42rpx), r:if($useResponse, 1.5em, 42rpx), px:if($useResponse, 0.25em, 7rpx))
	),
);
@each $obj, $objMap in $dicSize{
	@each $size, $sizeMap in $objMap{
		$w: map-get($sizeMap, "w");
		$h: map-get($sizeMap, "h");
		$r: map-get($sizeMap, "r");//圆角基础值，要二次计算
		$px: map-get($sizeMap, "px");
		$py: map-get($sizeMap, "py");
		.vi_styleController.vi_#{$obj}.vi_#{$size}{ width:#{$w};height:#{$h};}
		.vi_styleController.vi_#{$obj}.vi_#{$size}.vi_circle{ border-radius: #{$r /2};}
		.vi_styleController.vi_#{$obj}.vi_#{$size}.vi_square{ border-radius: #{$r * $squareRate};}
		@if($px or $py){
			.vi_styleController.vi_#{$obj}.vi_#{$size}{ padding: if($py, $py, 0) if($px, $px, 0); }
		}
	}
}